<template>
  <div class="timeLineComponets">
    <div class="timeLine">
      <div class="timelineTit">
        <div class="date">十月</div>
        <div class="operate" @click="open(1)">
          <div v-if="isOpen.includes(1)">
            收起
            <van-icon name="arrow-down" />
          </div>
          <div v-else>
            展开
            <van-icon name="arrow-up" />
          </div>
        </div>
      </div>
      <div class="timeLineList" v-if="isOpen.includes(1)">
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">十月</div>
            <div class="lBottom">23</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">成熟期 第三十天</div>
          <div class="box-r" @click="show=true,showIndex=5">查看图片</div>
        </div>
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">十月</div>
            <div class="lBottom">22</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">成熟期 第二十九天</div>
          <div class="box-r" @click="show=true,showIndex=11">查看图片</div>
        </div>
        <!-- <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">九月</div>
            <div class="lBottom">24</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">成熟期 第十天</div>
          <div class="box-r" @click="show=true,showIndex=5">查看图片</div>
        </div> -->
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">十月</div>
            <div class="lBottom">15</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">成熟期 第二十二天</div>
          <div class="box-r" @click="show=true,showIndex=7">查看图片</div>
        </div>
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">十月</div>
            <div class="lBottom">14</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">成熟期 第二十一天</div>
          <div class="box-r" @click="show=true,showIndex=10">查看图片</div>
        </div>
      </div>
      <div class="timelineTit">
        <div class="date">九月</div>
        <div class="operate" @click="open(5)">
          <div v-if="isOpen.includes(5)">
            收起
            <van-icon name="arrow-down" />
          </div>
          <div v-else>
            展开
            <van-icon name="arrow-up" />
          </div>
        </div>
      </div>
      <div class="timeLineList" v-if="isOpen.includes(5)">
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">九月</div>
            <div class="lBottom">15</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">成熟期 第一天</div>
          <div class="box-r" @click="show=true,showIndex=6">查看图片</div>
        </div>
      </div>
      <!-- 八月 -->
      <div class="timelineTit">
        <div class="date">八月</div>
        <div class="operate" @click="open(3)">
          <div v-if="isOpen.includes(3)">
            收起
            <van-icon name="arrow-down" />
          </div>
          <div v-else>
            展开
            <van-icon name="arrow-up" />
          </div>
        </div>
      </div>
      <div class="timeLineList" v-if="isOpen.includes(3)">
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">八月</div>
            <div class="lBottom">23</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">灌浆期 第十一天</div>
          <div class="box-r" @click="show=true,showIndex=4">查看图片</div>
        </div>
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">八月</div>
            <div class="lBottom">12</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">灌浆期 第一天</div>
          <div class="box-r" @click="show=true,showIndex=3">查看图片</div>
        </div>
      </div>
            <!-- 七月 -->
            <div class="timelineTit">
        <div class="date">七月</div>
        <div class="operate" @click="open(4)">
          <div v-if="isOpen.includes(4)">
            收起
            <van-icon name="arrow-down" />
          </div>
          <div v-else>
            展开
            <van-icon name="arrow-up" />
          </div>
        </div>
      </div>
      <div class="timeLineList" v-if="isOpen.includes(4)">
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">七月</div>
            <div class="lBottom">23</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">长穗期 第十一天</div>
          <div class="box-r" @click="show=true,showIndex=8">查看图片</div>
        </div>
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">七月</div>
            <div class="lBottom">12</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">长穗期 第一天</div>
          <div class="box-r" @click="show=true,showIndex=9">查看图片</div>
        </div>
      </div>
      <!-- 六月 -->
      <div class="timelineTit">
        <div class="date">五月</div>
        <div class="operate" @click="open(2)">
          <div v-if="isOpen.includes(2)">
            收起
            <van-icon name="arrow-down" />
          </div>
          <div v-else>
            展开
            <van-icon name="arrow-up" />
          </div>
        </div>
      </div>
      <div class="timeLineList" v-if="isOpen.includes(2)">
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">五月</div>
            <div class="lBottom">12</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">幼苗期 第十一天</div>
          <div class="box-r" @click="show=true,showIndex=1">查看图片</div>
        </div>
        <div class="content">
          <div class="dian"></div>
          <div class="box-l">
            <div class="lTop">五月</div>
            <div class="lBottom">2</div>
            <div class="xian"></div>
          </div>
          <div class="box-c">幼苗期 第一天</div>
          <div class="box-r" @click="show=true,showIndex=0">查看图片</div>
        </div>
      </div>
    </div>
    <van-image-preview v-model="show" :startPosition="showIndex" :images="images">
    </van-image-preview>
  </div>
</template>

<script>
export default {
  name: 'timeline',

  data () {
    return {
      isOpen: [1],
      show: false,
      showIndex: 0,
      images: [
        require('@/assets/farming/5-1.jpg'),
        require('@/assets/farming/5-2.jpg'),
        require('@/assets/farming/5-3.jpg'),
        require('@/assets/farming/5-4.jpg'),
        require('@/assets/farming/5-5.jpg'),
        require('@/assets/farming/6.jpg'),
        require('@/assets/farming/7.jpg'),
        require('@/assets/farming/8.webp'),
        require('@/assets/farming/9.jpg'),
        require('@/assets/farming/10.jpg'),
        require('@/assets/farming/11.png'),
        require('@/assets/farming/12.jpeg')
      ]
    }
  },

  mounted () {},

  methods: {
    open (index) {
      if (this.isOpen.includes(index)) {
        // 如果已经包含，则移除
        this.isOpen = this.isOpen.filter((i) => i !== index)
      } else {
        // 如果不包含，则添加
        this.isOpen.push(index)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.timeLineComponets {
  // overflow-y: auto;
  min-height: 180px;
}
.timelineTit {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .date {
    font-weight: 500;
    font-size: 20px;
    color: #19b560;
  }
  .operate {
    font-weight: 500;
    font-size: 12px;
    color: #19b560;
  }
}
.timeLineList {
  border-left: 1px solid #19b560;
  padding: 0 0 0 17px;
  margin-left: 12px;
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 11px;
    height: 60px;
    border: 1px solid #e8f8ef;
    // background: #FFFFFF;
    border-radius: 8px;
    margin-bottom: 12px;
    .dian {
      position: absolute;
      left: -22px;
      top: 50%;
      margin-top: -5px;
      width: 9px;
      height: 9px;
      background: #19b560;
      box-shadow: 0px 1px 2px 0px rgba(15, 34, 67, 0.2);
      border-radius: 50%;
      border: 2px solid #ffffff;
    }
    .box-l {
      position: relative;
      margin-right: 16px;
      .lTop {
        font-weight: 400;
        font-size: 12px;
        color: #71807b;
        width: 30px;
        text-align: center;
      }
      .lBottom {
        font-weight: bold;
        font-size: 20px;
        margin-top: 3px;
        color: #0a241b;
        text-align: center;
      }
      .xian {
        height: 32px;
        width: 1px;
        position: absolute;
        right: -15px;
        top: 20%;
        border-right: 2px solid #ccc;
      }
    }
    .box-c {
      margin-left: 12px;
      width: 160px;
      height: 36px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #0a241b;
      line-height: 36px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .box-r {
      width: 68px;
      height: 24px;
      background: #19b560;
      border-radius: 4px;
      font-weight: 400;
      font-size: 12px;
      color: #ffffff;
      text-align: center;
      line-height: 24px;
    }
  }
}
</style>
